<div class="swiper-container" id="swiperBanner">
    <div class="swiper-wrapper">
      <!-- <div class="swiper-slide swiper-lazy" data-background="./static/images/banner01.jpg"> -->
      <div class="swiper-slide ">
        <img data-src="./static/images/banner.jpg" width="100%" class="swiper-lazy" alt="">
        <div class="swiper-lazy-preloader"></div>
      </div>
      <div class="swiper-slide ">
        <img data-src="./static/images/banner.jpg" width="100%" class="swiper-lazy" alt="">
        <div class="swiper-lazy-preloader"></div>
      </div>
      <div class="swiper-slide ">
        <img data-src="./static/images/banner.jpg" width="100%" class="swiper-lazy" alt="">
        <div class="swiper-lazy-preloader"></div>
      </div>
    </div>
 
    <div class="swiper-pagination"></div> 
    <!-- <div class="swiper-button-prev"></div> -->
    <!-- <div class="swiper-button-next"></div> --> 
  </div>
  <script>
    $(function(){
  var swiperBanner = new Swiper('#swiperBanner', {
    // direction: 'vertical',
    autoplay:true,
    loop: true,
    // effect : 'fade',
    // effect : 'flip',
    // effect : 'cube',
    /*   effect : 'coverflow',
    slidesPerView: 3,
    centeredSlides: true, */
    keyboard: { enabled: true, },
    lazy: {loadPrevNext: true,},
    // noSwiping: true,
    //   noSwipingSelector: '.banner-contact',
    pagination: {
      el: '.swiper-pagination',
      clickable :true,
    },
    navigation: {
      nextEl: '#swiperBanner .swiper-button-next',
      prevEl: '#swiperBanner .swiper-button-prev',
    } 
  })
})
  </script>